.con{
    position: relative;
    perspective: 800px;
    perspective-origin: top right;
    width: 400px;
    height: 400px;
    margin: 400px auto;
    border: 2px solid white;
    border-radius: 4px;
}
div{
    display: block;

}
.cube{
    position: absolute;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    margin: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    animation: move 10s linear infinite;
}
@keyframes move{
    0%{
        transform: translate(-50%,-50%) rotateY(0deg) rotateX(720deg) rotateZ(0deg);
    }
    100%{
        transform: translate(-50%,-50%) rotateY(360deg) rotateX(720deg) rotateZ(360deg);
    }
}

.side{
    position: absolute;
    width: 100%;
    height: 100%;
    /* opacity: 1; */
    border: 2px solid white;
    text-align: center;
    line-height: 200px;
    font-size: 2em;
    
}
.front{
    background-color: #eddd9e;
    transform: translateZ(100px);
}
.left{
    background-color: rgb(145,152,134);
    transform: translateX(-100px) rotateY(-90deg);
}
.right{
    background-color: rgb(208,133,104);
    transform: translateX(100px) rotateY(90deg);
}
.back{
    background-color: rgb(121,93,81);
    transform: rotateY(180deg) translateZ(100px);
}
.top{
    background-color: rgb(61,59,69);
    transform: translateY(-100px) rotateX(90deg);
}
.bottom{
    background-color: rgb(140,112,153); 
    transform: translateY(100px) rotateX(-90deg);
}